// 封装购物车模块
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { useUserStore } from './user'
import { getCartList, addCartApi, delCartApi } from '@/apis/cart'
import { ElMessage } from 'element-plus'

export const useCartStore = defineStore('cart', () => {
    const userStore = useUserStore()
    /*     因为 userStore.userInfo.token 是一个 响应式数据（reactive/ref），你不能直接把它赋值给一个普通变量（比如 isLogin），否则它就失去了响应性。
    而通过 computed(() => userStore.userInfo.token)，
    你就创建了一个 响应式的计算属性，当 token 变化时，isLogin 的值也会自动更新，并触发相关的副作用（例如页面重新渲染、逻辑分支变化等）。 */
    const isLogin = computed(() => userStore.userInfo.token)
    // 定义state-cartList
    const cartList = ref([])
    // 定义action-addCart
    const addCart =async (goods)  => {
        const {skuId,count} = goods
        if (isLogin.value) {
            // 登陆后加入购物车逻辑
           await addCartApi({skuId,count})
           getNewewCartList()
        ElMessage.success('添加成功')
        } else {
            // 添加购物车操作
            const item = cartList.value.find(item => item.skuId === goods.skuId)
            if (item) {
                item.count++
            } else {
                cartList.value.push(goods)
            }
        }
    }

    // 删除购物车
    const delCart = async (skuId) => {
        if(isLogin.value){
            await delCartApi([skuId])
            getNewewCartList()
        }else{
            const idx = cartList.value.filter(item => item.skuId === skuId)
            cartList.value.splice(idx, 1)
        }

    }

    // 清除购物车
    const clearCart =  () => {
        cartList.value = []
    }

    // 获取最新购物车列表
    const getNewewCartList = async () => {
        const res = await getCartList()
        cartList.value = res.result
    }

    // 单选功能
    const singleCheck = (skuId, selected) => {
        // 通过skuId找到要修改的那一项，然后把他的selected修改为传过来的selected
        const item = cartList.value.find((item) => item.skuId === skuId)
        item.selected = selected
    }

    // 全选功能
    const allCheck = (selected) => {
        cartList.value.forEach((item) => item.selected = selected)
    }

    // 计算属性
    // 1.总的数量 所有count之和
    const allCount = computed(() => cartList.value.reduce((a, c) => a + c.count, 0))
    // 2.总价 所有项的count*price之和
    const allPrice = computed(() => cartList.value.reduce((a, c) => a + c.count * c.price, 0))
    // 是否全选
    const isAllCheck = computed(() => {
        // 如果所有商品的 selected 属性都为 true，则返回 true，否则返回 false。
        // 也就是说，如果所有商品都被选中，则返回 true，否则返回 false。
        return cartList.value.every((item) => item.selected)
        /* .every() 方法：     
       它会遍历数组中的每一个元素。
       如果每个元素都满足条件（即回调函数返回 true），则 .every() 返回 true；
       只要有一个元素不满足条件，就会立即返回 false。 */
    })
    // 已选择数量
    const selectedCount = computed(() => cartList.value.filter(item => item.selected).reduce((a, c) => a + c.count, 0))

    // 已选择商品价钱合计
    const selectedPrice = computed(() => cartList.value.filter(item => item.selected).reduce((a, c) => a + c.count * c.price, 0))
    return {
        cartList,
        addCart,
        delCart,
        allCount,
        allPrice,
        singleCheck,
        isAllCheck,
        allCheck,
        selectedCount,
        selectedPrice,
        clearCart,
        getNewewCartList
    }
}, {
    persist: true
})